<!-- 部门树 -->
<template>
  <el-card shadow="never">
    <el-input v-model="deptName" placeholder="部门名称" clearable>
      <template #prefix>
        <i-ep-search />
      </template>
    </el-input>

    <base-tree ref="deptTreeRef" class="mt-2" :data="deptList" :expand-on-click-node="false" :filter-node-method="handleFilter" default-expand-all @node-click="handleNodeClick" />
  </el-card>
</template>

<script setup lang="ts">
  import { listDepts } from '@/api/dept';
  import { DeptVO } from '@/api/dept/types';
  import BaseTree from '@/components/BaseTree/index.vue';

  const props = defineProps({
    modelValue: {
      type: [String],
      default: undefined,
    },
  });

  const deptList = ref<DeptVO[]>(); // 部门列表
  const deptTreeRef = ref(BaseTree); // 部门树
  const deptName = ref(); // 部门名称

  const emits = defineEmits(['node-click']);

  const deptId = useVModel(props, 'modelValue', emits);

  watchEffect(
    () => {
      deptTreeRef.value.getTree().value.filter(deptName.value);
    },
    {
      flush: 'post', // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
    }
  );

  /** 部门筛选 */
  function handleFilter(value: string, data: any) {
    if (!value) {
      return true;
    }
    return data.name.indexOf(value) !== -1;
  }

  /** 部门树节点 Click */
  function handleNodeClick(data: { [key: string]: any }) {
    console.log(data);
    deptId.value = data.id;
    emits('node-click', data);
  }

  onBeforeMount(() => {
    listDepts().then((response) => {
      deptList.value = [{ id: '', name: '部门', children: response.data }];
    });
  });
</script>
